<template>
  <div class="contest-detail-wrapper">
    <div v-loading="loading" element-loading-text="加载竞赛详情中...">
      
      
      <!-- 竞赛基本信息 -->
      <el-card class="block-card" v-if="!loading && contestInfo.id">
        <!-- 返回按钮 -->
        <div class="back-button-wrapper"  @click="goBack">
            返回竞赛列表
          <el-button 
            type="text" 
            icon="el-icon-arrow-right" 
            class="back-button"
          >
          </el-button>
        </div>
        <div class="contest-header">
          <div class="contest-title">
            <h1>{{ contestInfo.title }}</h1>
            <el-tag v-if="getContestStatus() === '进行中'" type="success" size="medium">进行中</el-tag>
            <el-tag v-else-if="getContestStatus() === '即将开始'" type="warning" size="medium">即将开始</el-tag>
            <el-tag v-else type="info" size="medium">已结束</el-tag>
          </div>
          <!-- <div class="contest-actions">
            <el-button type="primary" @click="enterContest" v-if="getContestStatus() === '进行中'">进入竞赛</el-button>
            <el-button type="success" @click="registerContest" v-if="getContestStatus() === '即将开始'">报名参赛</el-button>
            <el-button @click="viewStandings">查看排行榜</el-button>
          </div> -->
        </div>
        
        <el-row :gutter="24" class="contest-info">
          <el-col :span="8">
            <div class="info-item">
              <span class="label">开始时间：</span>
              <span class="value">{{ formatTime(contestInfo.start_time) }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">结束时间：</span>
              <span class="value">{{ formatTime(contestInfo.end_time) }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">竞赛时长：</span>
              <span class="value">{{ formatDuration(contestInfo.duration) }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="24" class="contest-stats">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-number">{{ stats.participant_count || 0 }}</div>
              <div class="stat-label">参赛人数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-number">{{ stats.problem_count || 0 }}</div>
              <div class="stat-label">题目数量</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-number">{{ stats.total_solved_count || 0 }}</div>
              <div class="stat-label">已解决</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-number">{{ stats.total_submission_count || 0 }}</div>
              <div class="stat-label">提交次数</div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 题目列表 -->
      <el-card class="block-card" v-if="!loading && problems.length > 0">
        <div class="section-header">
          <h3>竞赛题目</h3>
        </div>
        
        <el-table :data="problems" class="only-bottom-border-table" style="width: 100%;" :show-header="true" :border="false">
          <el-table-column prop="problem_order" label="#" width="80" />
          <el-table-column prop="title" label="题目名称">
            <template slot-scope="scope">
              <a style="color:#13c2c2; text-decoration: none;" href="javascript:void(0)" @click="viewProblem(scope.row.problem_id)">{{ scope.row.title }}</a>
              <el-tag v-if="scope.row.solve_user_count > 0" type="success" size="mini" style="margin-left: 8px;">已解决</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.difficulty === 1" type="success" size="mini">简单</el-tag>
              <el-tag v-else-if="scope.row.difficulty === 2" type="warning" size="mini">中等</el-tag>
              <el-tag v-else type="danger" size="mini">困难</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="solve_user_count" label="解决人数" width="100" />
          <el-table-column prop="submission_count" label="提交次数" width="100" />
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="viewProblem(scope.row.problem_id)">查看题目</el-button>
              <el-button type="text" size="small" @click="submitSolution(scope.row.problem_id)" v-if="getContestStatus() === '进行中'">提交</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { contestDetail } from '@/api/oj'

export default {
  name: 'ContestDetailView',
  data() {
    return {
      loading: false,
      contestInfo: {
        id: '',
        title: '',
        description: '',
        start_time: 0,
        end_time: 0,
        duration: 0,
        type: 1,
        status: 1
      },
      stats: {
        participant_count: 0,
        problem_count: 0,
        total_solved_count: 0,
        total_submission_count: 0
      },
      problems: []
    }
  },
  created() {
    this.fetchContestDetail()
  },
  watch: {
    '$route'(to, from) {
      if (to.params.id !== from.params.id) {
        this.fetchContestDetail()
      }
    }
  },
  methods: {
    async fetchContestDetail() {
      const contestId = this.$route.params.id
      if (!contestId) {
        this.$message.error('竞赛ID不存在')
        return
      }
      
      this.loading = true
      try {
        const response = await contestDetail(contestId)
        if (response.data.code === 200 && response.data.data) {
          this.contestInfo = response.data.data.contest_info
          this.stats = response.data.data.stats
          this.problems = response.data.data.problems
        } else {
          this.$message.error(response.data.message || '获取竞赛详情失败')
        }
      } catch (error) {
        console.error('获取竞赛详情失败:', error)
        this.$message.error('获取竞赛详情失败')
      } finally {
        this.loading = false
      }
    },
    
    formatTime(timestamp) {
      if (!timestamp) return '-'
      const date = new Date(timestamp * 1000)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    
    formatDuration(minutes) {
      if (!minutes) return '-'
      const hours = Math.floor(minutes / 60)
      const mins = minutes % 60
      if (hours > 0) {
        return `${hours}小时${mins > 0 ? mins + '分钟' : ''}`
      } else {
        return `${mins}分钟`
      }
    },
    
    getContestStatus() {
      const now = Math.floor(Date.now() / 1000)
      if (now < this.contestInfo.start_time) {
        return '即将开始'
      } else if (now >= this.contestInfo.start_time && now <= this.contestInfo.end_time) {
        return '进行中'
      } else {
        return '已结束'
      }
    },
    
    goBack() {
            window.history.back(); 
    },
    
    enterContest() {
      this.$router.push(`/contests/${this.contestInfo.id}/problems`);
    },
    
    registerContest() {
      this.$message.success('报名成功！');
    },
    
    viewStandings() {
      this.$message.info('查看完整排行榜');
    },
    
    viewProblem(problemId) {
      this.$router.push(`/problems/${problemId}`);
    },
    
    submitSolution(problemId) {
      this.$router.push(`/problems/${problemId}/submit`);
    }
  }
}
</script>

<style scoped>
.contest-detail-wrapper {
  margin: 0 auto;
  padding: 10px 0 24px 0;
}
.back-button-wrapper {
  margin-bottom: 16px;
  padding: 0 24px;
  float:right;
  cursor: pointer;
}
.back-button {
  font-size: 14px;
  color: #606266;
  padding: 8px 0;
  height: auto;
  transition: color 0.3s;
}
.back-button:hover {
  color: #409EFF;
}
.back-button i {
  margin-right: 4px;
}
.block-card {
  margin-bottom: 10px;
}
.contest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.contest-title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.contest-title h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}
.contest-actions {
  display: flex;
  gap: 12px;
}
.contest-info {
  margin-bottom: 24px;
}
.info-item {
  margin-bottom: 12px;
}
.info-item .label {
  color: #606266;
  font-weight: 500;
}
.info-item .value {
  color: #303133;
  font-weight: 600;
}
.contest-stats {
  margin-bottom: 16px;
}
.stat-card {
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}
.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #13c2c2;
  margin-bottom: 4px;
}
.stat-label {
  color: #606266;
  font-size: 14px;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.section-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}
.only-bottom-border-table >>> .el-table__header-wrapper th {
  border-bottom: 1px solid #ebeef5 !important;
}
.only-bottom-border-table >>> .el-table__body-wrapper td {
  border-bottom: 1px solid #ebeef5 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
</style> 